<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>水火箭发射实验平台3D预览</title>
    <!-- 引入Three.js库 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
    <!-- 引入鼠标控制插件 -->
    <script src="https://cdn.jsdelivr.net/npm/three@0.132.2/examples/js/controls/OrbitControls.js"></script>
    <style>
        body { margin: 0; }
        canvas { display: block; }
        .info { position: fixed; top: 10px; left: 10px; color: #fff; background: rgba(0,0,0,0.5); padding: 8px; font-size: 14px; }
    </style>
</head>
<body>
    <div class="info">
        操作说明：鼠标拖动旋转 | 滚轮缩放 | 右键平移
    </div>
    <script>
        // 1. 创建场景
        const scene = new THREE.Scene();
        scene.background = new THREE.Color(0xf0f0f0); // 背景色：浅灰

        // 2. 创建相机（透视相机，模拟人眼视角）
        const camera = new THREE.PerspectiveCamera(
            75, // 视野角度
            window.innerWidth / window.innerHeight, // 宽高比
            0.1, // 近裁剪面
            1000 // 远裁剪面
        );
        camera.position.set(5, 3, 8); // 相机位置（x,y,z）

        // 3. 创建渲染器（生成3D图像）
        const renderer = new THREE.WebGLRenderer({ antialias: true }); // 抗锯齿
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);

        // 4. 添加光照（模拟自然光，让模型有阴影）
        // 环境光（均匀照亮所有物体）
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
        scene.add(ambientLight);
        // 方向光（模拟太阳光，产生阴影）
        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
        directionalLight.position.set(10, 20, 15);
        directionalLight.castShadow = true; // 开启阴影投射
        // 设置阴影分辨率
        directionalLight.shadow.mapSize.width = 2048;
        directionalLight.shadow.mapSize.height = 2048;
        scene.add(directionalLight);

        // 5. 添加鼠标控制（允许旋转、缩放场景）
        const controls = new THREE.OrbitControls(camera, renderer.domElement);
        controls.enableDamping = true; // 阻尼效果，操作更顺滑
        controls.dampingFactor = 0.05;

        // 6. 构建水火箭发射平台3D模型（分模块创建）
        // 工具函数：快速创建立方体（简化重复代码）
        function createCube(x, y, z, width, height, depth, color) {
            const geometry = new THREE.BoxGeometry(width, height, depth);
            const material = new THREE.MeshStandardMaterial({ color: color });
            const cube = new THREE.Mesh(geometry, material);
            cube.position.set(x, y, z);
            cube.castShadow = true; // 投射阴影
            cube.receiveShadow = true; // 接收阴影
            scene.add(cube);
            return cube;
        }

        // 6.1 底座框架（灰色，稳定支撑）
        const baseMain = createCube(0, 0.5, 0, 6, 1, 4, 0x888888); // 主底座
        const baseLeg1 = createCube(-2.5, 0.25, 1.5, 0.5, 0.5, 0.5, 0x666666); // 支撑脚1
        const baseLeg2 = createCube(2.5, 0.25, 1.5, 0.5, 0.5, 0.5, 0x666666); // 支撑脚2
        const baseLeg3 = createCube(-2.5, 0.25, -1.5, 0.5, 0.5, 0.5, 0x666666); // 支撑脚3
        const baseLeg4 = createCube(2.5, 0.25, -1.5, 0.5, 0.5, 0.5, 0x666666); // 支撑脚4

        // 6.2 角度调节机构（蓝色，带刻度盘）
        const angleBase = createCube(0, 1.2, 0, 2, 0.2, 3, 0x4285f4); // 调节底座
        const angleDisk = createCube(0, 1.3, 1.6, 0.3, 0.1, 0.8, 0xffcc00); // 刻度盘（黄色）
        const angleBolt = createCube(0, 1.35, 1.6, 0.1, 0.1, 0.1, 0x333333); // 固定螺栓

        // 6.3 箭体固定装置（红色，弧形卡扣）
        const fixLeft = createCube(-0.6, 1.5, 0, 0.2, 0.8, 0.8, 0xea4335); // 左侧卡扣
        const fixRight = createCube(0.6, 1.5, 0, 0.2, 0.8, 0.8, 0xea4335); // 右侧卡扣
        const fixPadLeft = createCube(-0.5, 1.5, 0, 0.1, 0.6, 0.6, 0xcccccc); // 橡胶垫（左）
        const fixPadRight = createCube(0.5, 1.5, 0, 0.1, 0.6, 0.6, 0xcccccc); // 橡胶垫（右）

        // 6.4 触发释放组件（绿色，拉杆）
        const triggerRod = createCube(1.2, 1.5, 0, 0.8, 0.1, 0.1, 0x34a853); // 拉杆
        const triggerLock = createCube(0.9, 1.6, 0, 0.2, 0.2, 0.2, 0x333333); // 锁扣

        // 6.5 水火箭模型（透明蓝色，模拟塑料瓶）
        const rocketBody = createCube(0, 2.2, 0, 0.8, 2, 0.8, 0x87ceeb); // 箭身
        rocketBody.material.transparent = true;
        rocketBody.material.opacity = 0.7;
        const rocketNose = new THREE.Mesh(
            new THREE.ConeGeometry(0.4, 1, 32), // 圆锥（箭头）
            new THREE.MeshStandardMaterial({ color: 0xea4335 })
        );
        rocketNose.position.set(0, 3.7, 0);
        rocketNose.castShadow = true;
        scene.add(rocketNose);

        // 7. 窗口大小自适应
        window.addEventListener('resize', () => {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        });

        // 8. 渲染循环（持续更新3D场景）
        function animate() {
            requestAnimationFrame(animate);
            controls.update(); // 更新鼠标控制
            renderer.render(scene, camera); // 渲染场景
        }
        animate();
    </script>
</body>
</html>